<template>
	<panel v-bind:data="promotion" v-bind:headerBtnType="'close'">
		<template slot="content" scope="contentScope">
			<div class="panel-content">
				<div class="panel-main-pic" v-if="contentScope.data.imgUrl && contentScope.data.imgUrl !== ''">
					<img class="main-pic" v-bind:src="contentScope.data.imgUrl">
				</div>
				<p class="title" v-on:click="gotoQuestion">{{contentScope.data.title}}</p>
				<p class="description">{{contentScope.data.description}}</p>
			</div>
		</template>
		<template slot="footer" scope="footerScope">
			<answer-actions v-bind:data="footerScope.data"></answer-actions>
		</template>
	</panel>
</template>

<script>
	import Panel from 'CommonComponent/panel'
	import AnswerActions from 'CommonComponent/answer-actions'

	export default {
		name: 'promotion-item',
		props: {
			'promotion': {
				type: Object,
				required: true
			}
		},
		data () {
			return {
			}
		},
		computed: {
		},
		methods: {
			gotoQuestion () {
				this.$router.push({name: 'question'});
			}
		},
		components: {
			'answer-actions': AnswerActions,
			'panel': Panel
		}
	}
</script>

<style lang="less">
	.panel-content {
		.main-pic {
			max-height: 130px;
			overflow: hidden;
			width: 100%;
			margin-bottom: 10px;

			.pic {
				margin-top: -5%;
				width: 100%;
			}
		}

		.title {
			color: #333;
			font-size: 16px;
			font-weight: 700;
			line-height: 20px;
			margin-bottom: 10px;
		}

		.description {
			color: #666;
			margin-bottom: 10px;
		}
	}
</style>
